<template>
    <div class="transtion_head">
        <div class="board">
            <div class="name">
                <p class="team_name">{{ teamInfo[gameInfo.survivorTeam].teamName }}</p>
            </div>
            <div class="logo">
                <img :src="teamInfo[gameInfo.survivorTeam].logo" />
            </div>
            <div class="score">
                <p>W</p>
                <p>{{ gameInfo[`${gameInfo.survivorTeam}Score`].win }}</p>
                <p>D</p>
                <p>{{ gameInfo[`${gameInfo.survivorTeam}Score`].down }}</p>
            </div>
        </div>
        <div class="map" :style="{
            backgroundImage:`url(${mapLink})`
        }">
          <p>{{ gameInfo.pickMap }}</p>
        </div>
        <div class="board mirror">
            <div class="score">
                <p>W</p>
                <p>{{ gameInfo[`${gameInfo.hunterTeam}Score`].win }}</p>
                <p>D</p>
                <p>{{ gameInfo[`${gameInfo.hunterTeam}Score`].down }}</p>
            </div>
            <div class="logo">
                <img :src="teamInfo[gameInfo.hunterTeam].logo" />
            </div>
            <div class="name">
                <p class="team_name">{{ teamInfo[gameInfo.hunterTeam].teamName }}</p>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts' name="TransitionHead">
import storeHelper from '@/utils/TauriStore';
import BoardChannel from '@/utils/boardChannel';
const channel = new BoardChannel('bp-system');
const teamInfo = reactive<TeamInfo>({
    team1: {
        logo: '',
        teamName: '',
        survivor: [],
        hunter: ''
    },
    team2: {
        logo: '',
        teamName: '',
        survivor: [],
        hunter: ''
    }
});
const gameInfo = reactive<IncSessionGameInfo>({
    session: 'bo1',
    banMap: null,
    pickMap: null,
    survivorTeam: 'team1',
    hunterTeam: 'team2',
    team1Score: {
        win: 0,
        down: 0,
        lose: 0,
        smallScore: 0,
        gloalban: []
    },
    team2Score: {
        win: 0,
        down: 0,
        lose: 0,
        smallScore: 0,
        gloalban: []
    }
});
const mapLink = ref('');
const { stop } = watch(() => gameInfo.pickMap,(newVal)=>{
    if(!newVal) return;
    import(`@/assets/images/map/${newVal}.png`).then(res=>{
        mapLink.value = res.default;
    })
})
const _init = async () => {
    try {
        const teams = await storeHelper.get('teamInfo');
        const session = await storeHelper.get('session');
        const gameStoreInfo = await storeHelper.get('gameInfo');
        if (typeof gameStoreInfo === 'object') {
            Object.assign(gameInfo, gameStoreInfo, { session });
        }
        if (typeof teams === 'object') {
            Object.assign(teamInfo, teams);
        }
    } catch (error) {
        console.log(error);
    }
}
onMounted(() => {
    _init();
    channel.on('teamInfoChange', async (bool: boolean) => {
        if (bool) {
            _init();
        }
    });
    channel.on('gameInfoChange', (info: IncSessionGameInfo) => {
        Object.assign(gameInfo, info);
    })
});
onUnmounted(()=>{
    stop();
})
</script>
<style scoped lang='scss'>
.transtion_head {
    grid-area: Top;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 395px auto 395px;
    .map{
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size:cover;
        position: relative;
        p{
            position: absolute;
            left:8px;
            bottom:8px;
            color:#fff;
            font-size: 16px;
            font-weight: bold;
        }
    }
    .board {
        background-image: url('@/assets/images/scoreLeft.png');
        background-size: cover;
        background-repeat: no-repeat;
        display: grid;
        grid-template-columns: 120px 100px auto;

        &.mirror {
            background-image: url('@/assets/images/scoreRight.png');
            grid-template-columns: auto 100px 120px;
        }

        .name {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            .team_name {
                color: #fff;
                font-size: 18px;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
            }

        }

        .logo {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 80px;
                height: 80px;
            }
        }

        .score {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1em;

            p {
                font-size: 24px;
                color: #fff;
                font-weight: bolder;
            }
        }
    }
}
</style>